<template>
  <el-row>
    <el-col :span="4">
      <el-input v-model="searchUserId"></el-input>
    </el-col>
    <el-col :offset="1" :span="2">
      <el-button type="primary" @click="handleSerachUser">搜索</el-button>
    </el-col>
    <el-col :offset="1" :span="2">
      <el-button type="success" @click="handleAddOneUser">添加</el-button>
    </el-col>
    <el-col :offset="1" :span="2">
      <el-button type="danger">批量删除</el-button>
    </el-col>
  </el-row>
  <el-table style="margin-top: 10px;margin-bottom: 10px" height="370px" border :data="userList">
    <el-table-column type="selection"></el-table-column>
    <el-table-column type="index" label="序号" width="80px"></el-table-column>
    <el-table-column label="用户名" prop="username"></el-table-column>
    <el-table-column label="用户昵称" prop="nickName"></el-table-column>
    <el-table-column label="权限列表" prop="roleName"></el-table-column>
    <el-table-column label="创建时间" prop="gmtCreate" sortable></el-table-column>
    <el-table-column label="更新时间" prop="gmtModified" sortable></el-table-column>
    <el-table-column label="操作" width="180px">
      <template #default>
        <el-button type="info" size="small">
          <el-icon>
            <Avatar/>
          </el-icon>
        </el-button>
        <el-button type="primary" size="small">
          <el-icon>
            <EditPen/>
          </el-icon>
        </el-button>
        <el-button type="danger" size="small">
          <el-icon>
            <Delete/>
          </el-icon>
        </el-button>
      </template>
    </el-table-column>
  </el-table>
  <!--分页器-->
  <el-pagination
      :page-size="this.limit"
      :page-sizes="[3, 5, 10]"
      background
      layout="prev, pager, next, jumper,->,sizes,total"
      :total="this.total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
  />
  <el-dialog v-model="dialogFormVisible" title="添加用户" draggable>
    <el-form label-position="left" label-width="80px" :model="user">
      <el-form-item label="用户名:">
        <el-input v-model="user.username"></el-input>
      </el-form-item>
      <el-form-item label="密码:">
        <el-input v-model="user.password"></el-input>
      </el-form-item>
      <el-form-item label="昵称:">
        <el-input v-model="user.nickname"></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button>取消</el-button>
        <el-button type="primary" @click="doAdd">确定</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script>
import {reqAddUser, reqGetUserByName, reqGetUsers} from "../../api/realRequests";

export default {
  name: "PermissionManagement",
  data() {
    return {
      // 搜索时用的id
      searchUserId: '',
      page: 1,
      limit: 10,
      total:'',
      // 储存搜索返回的用户列表
      userList: [],
      // 添加用户使用
      user: {
        username: '',
        password: '',
        nickname: ''
      },
      //
      dialogFormVisible: false
    }
  },
  mounted() {
    this.getAllUsers()
  },
  methods: {
    // 获取用户信息
    async getAllUsers() {
      // console.log(this.userName)
      let res = await reqGetUsers(this.page, this.limit)
      // console.log(res)
      if (res.code == 20000) {
        this.userList = res.data.items
        this.total =res.data.total
      }
    },
    // 当前页码发生变化时触发，传递的形参是当前点击的页码
    handleCurrentChange(val) {
      this.page = val
      this.getAllUsers()
    },
    // 每页条数改变时
    handleSizeChange(val) {
      this.limit = val
      this.getAllUsers()
    },
    // 搜索
    async handleSerachUser() {
      let res = await reqGetUserByName(this.searchUserId)
      // console.log(res)
      if (res.code == 20000) {
        this.userList = []
        this.userList.push(res.data.item)
      }
    },
    // 添加用户按钮
    async handleAddOneUser() {
      this.dialogFormVisible = true
    },
    // 添加确定按钮
    async doAdd() {
      let addUser = this.user
      let res = await reqAddUser(addUser)
      if (res.code == 20000) {
        this.getAllUsers()
      }
    }
  }
}
</script>

<style scoped>

</style>